<template>
  <view class="container">
    <view style="font-weight: bold; font-size: 48rpx; color: #151515">我的性别</view>
    <view style="font-weight: 500; font-size: 24rpx; color: #ff3742">注册后性别不可修改</view>
    <!-- 性别 -->
    <view style="display: flex; margin-top: 100rpx">
      <!-- 男 -->
      <view style="position: relative; top: 0; bottom: 0; margin-right: 20rpx">
        <image src="../../static/loginimg/boy.png" style="width: 112rpx; height: 140rpx; position: absolute; bottom: 0; left: 0" mode=""></image>
        <view :class="{ item: true, common: gender == 1 }" @click="choosefn">我是男生</view>
      </view>
      <!-- 女 -->
      <view style="position: relative; top: 0; bottom: 0">
        <image src="../../static/loginimg/girl.png" style="width: 112rpx; height: 140rpx; position: absolute; bottom: 0; left: 0" mode=""></image>
        <view :class="{ item2: true, common: gender == 2 }" @click="choosefn2">我是女生</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gender: null
    };
  },
  methods: {
    // 上传个人信息
    async choosefn() {
      this.gender = 1;
      const res = await this.http('/user/profile', {
        gender: this.gender
      });
      console.log(res);
      if (res.code == 1) {
        uni.navigateTo({
          url: '/login/burn/burn'
        });
      }
    },
    async choosefn2() {
      this.gender = 2;
      const res = await this.http('/user/profile', {
        gender: this.gender
      });
      if (res.code == 1) {
        uni.navigateTo({
          url: '/login/burn/burn'
        });
      }
    }
  }
};
</script>

<style lang="scss">
.container {
  padding: 47rpx;
  .item {
    box-sizing: border-box;
    padding-right: 50rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    width: 318rpx;
    height: 92rpx;
    text-align: right;
    line-height: 92rpx;
    background: #e8e8e8;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
  }
  .common {
    background: #feff01 !important;
  }
  .item2 {
    box-sizing: border-box;
    width: 318rpx;
    height: 92rpx;
    text-align: right;
    line-height: 92rpx;
    background: #e8e8e8;
    border-radius: 48rpx 48rpx 48rpx 48rpx;
    padding-right: 50rpx;
  }
}
</style>
